// 前端路由的配置文件
import Vue from "vue";
import VueRouter from "vue-router";

// 引入路由组件
import Home from "../views/Home";
import About from "../views/About";
import News from "../views/News";
import Message from "../views/Message";
import Detail from "../views/Detail";

// 所有插件都要安装、使用
// 实际上就会全局注册两个组件: router-link  router-view
Vue.use(VueRouter);

// 配置前端路由
const router = new VueRouter({
  // 路由配置项
  routes: [
    {
      // 路由路径
      path: "/home",
      // 路由组件
      component: Home,
      // 子路由
      children: [
        {
          path: "/home/news",
          component: News,
        },
        {
          // path: '/message', // 地址就是 /message
          path: "message", // 没有以 / 开头，就会自动加上父路由路由：/home/message
          component: Message,
          children: [
            {
              name: "Detail", // 命名路由
              // 正常地址: 一对一关系 - 一个地址对应上一个路由组件
              // 需求：多对一 - 多一个地址对应上一个路由组件
              path: "detail/:id", // :id参数：params参数
              component: Detail,
              props($route) {
                // 这个对象里面的内容，就会props方式传递给Detail组件
                return {
                  // 将params参数中的内容展开对象上
                  // 对象上有id参数
                  ...$route.params,
                  // 将query参数中的内容展开对象上
                  // 对象上有name、age参数
                  ...$route.query,
                };
              },
            },
          ],
        },
        {
          path: "", // 匹配任意地址
          redirect: "news",
        },
      ],
    },
    {
      path: "/about",
      component: About,
    },
    // {
    //   path: "/", // 只能匹配一个地址
    //   // 重定向
    //   redirect: "/home",
    // },
    {
      path: "*", // 匹配所有地址（自动排除配置过的地址/home、/about）
      // 重定向
      redirect: "/home",
    },
  ],
});

// 将router给暴露出去，给vue去使用
export default router;
